<template>
  <div class='detail-base'>
    <!--返回按钮-->
    <t-button theme="primary" style='margin-bottom: 10px;' @click='$router.back()'>
      <template #icon><ArrowLeftIcon /></template>
      返回
    </t-button>
    <t-card
      title='该流浪动物基本信息'
      :bordered='false'
    >
      <div class='info-block'>
        <div
          v-for='(item, index) in baseInfoData'
          :key='index'
          class='info-item'
        >
          <h1>{{ item.name }}</h1>
          <span
            :class="{
              ['inProgress']: item.type && item.type.value === 'inProgress',
              ['pdf']: item.type && item.type.value === 'pdf',
            }"
          >
            <i v-if="item.type && item.type.key === 'contractStatus'" />
            {{ item.value }}
          </span>
        </div>
      </div>
    </t-card>

    <t-card title='活动记录' class='container-base-margin-top' :bordered='false'>
      <t-space>
        <t-space direction='vertical' align='center' v-for='item in imgList'>
          <t-image
            :src='item.url'
            shape='square'
            @click='openImg(item.url)'
            :style="{ width: '300px', height: '200px' }"
            fit='cover'
          />
          <span>{{ item.text }}</span>
        </t-space>


        <div>
          <t-image-viewer v-model:visible='visible' draggable mode='modeless' :images='imgItem'>
            <template #trigger>
              <div class='tdesign-demo-image-viewer__ui-image'>
                <div class='tdesign-demo-image-viewer__ui-image--hover' @click='openImg'>
                </div>
              </div>
            </template>
          </t-image-viewer>
        </div>
      </t-space>
    </t-card>

  </div>
</template>
<script>
import { prefix } from '@/config/global'
import { ArrowLeftIcon } from 'tdesign-icons-vue'

export default {
  name: 'DetailBase',
  components: {ArrowLeftIcon},
  created () {
    const vAid = this.$route.query
    console.log(this.$route.query)
  },
  data () {
    return {
      prefix,
      curImg:'',
      visible: false,
      imgList: [
        {
          url: 'https://ts1.cn.mm.bing.net/th/id/R-C.976a154abf33faf69ecabadfce259550?rik=3i7zXeKgV2dASQ&riu=http%3a%2f%2fnews.cjn.cn%2f24hour%2fwh24%2f201904%2fW020190408526198615338.jpg&ehk=toFIb8AtBEM3k68G2F4%2fHIUSl2meKXMLK4cEEA24cmE%3d&risl=&pid=ImgRaw&r=0',
          text: ''
        },
      ],
      imgItem: [
        'https://ts1.cn.mm.bing.net/th/id/R-C.976a154abf33faf69ecabadfce259550?rik=3i7zXeKgV2dASQ&riu=http%3a%2f%2fnews.cjn.cn%2f24hour%2fwh24%2f201904%2fW020190408526198615338.jpg&ehk=toFIb8AtBEM3k68G2F4%2fHIUSl2meKXMLK4cEEA24cmE%3d&risl=&pid=ImgRaw&r=0'
      ],
      baseInfoData: [
        {
          name: '动物名称',
          value: '咕噜'
        },
        {
          name: '类别',
          value: '小土狗'
        },
        {
          name: '动物状态',
          value: '收养与爱益星球',
          type: {
            key: 'contractStatus',
            value: 'inProgress'
          }
        },
        {
          name: '收养房号',
          value: 'BHS6010'
        },
        {
          name: '出生日期',
          value: '2021-12-20'
        },
        {
          name: '年龄',
          value: '3岁'
        },
        {
          name: '认证时间',
          value: '2022-01-08'
        },
        {
          name: '认证地点',
          value: '爱益星球救助中心'
        },
        {
          name: '犬种',
          value: '小型'
        },
      ]
    }
  },
  methods: {
    openImg(imgUrl){
      this.visible = true
      this.curImg = imgUrl
      this.imgItem = [imgUrl]
    }
  }
}
</script>

<style lang='less' scoped>
@import '@/style/variables.less';
@import './imgPreview.css';
.detail-base {
  /deep/ .t-card {
    padding: 8px;
  }
  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }
  &-info-steps {
    padding-top: 12px;
  }
}
.info-block {
  column-count: 2;
  .info-item {
    padding: 12px 0;
    display: flex;
    color: var(--td-text-color-primary);
    h1 {
      width: 200px;
      font: var(--td-font-body-medium);
      color: var(--td-text-color-secondary);
      font-weight: normal;
      text-align: left;
      @media (max-width: @screen-sm-max) {
        width: 100px;
      }
      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        width: 120px;
      }
    }
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 24px;
    }
    i {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: var(--td-radius-circle);
      background: var(--td-success-color-5);
    }
    .inProgress {
      color: var(--td-success-color-5);
    }
    .pdf {
      color: var(--td-brand-color);
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.dialog-info-block {
  .info-item {
    padding: 12px 0;
    display: flex;
    h1 {
      width: 84px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: var(--td-text-color-secondary);
      text-align: left;
      line-height: 22px;
    }
    span {
      margin-left: 24px;
    }
    i {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: var(--td-radius-circle);
      background: var(--td-success-color-5);
    }
    .green {
      color: var(--td-success-color-5);
    }
    .blue {
      color: var(--td-brand-color);
    }
  }
}

</style>
